<template>
  <div>
    <NavView></NavView>
    <div class="center container">
      <div class="center-left">
        <div class="content">
          <el-card
            class="box-card"
            shadow="never"
            style="border-radius: 10px"
            v-for="(item, index) in form"
            :key="index"
          >
            <div slot="header" class="clearfix">
              <span>{{ item.month }}</span>
            </div>
            <div
              v-for="(item1, index) in item.articles"
              :key="index"
              class="text item"
              @click="sendText(item1.id)"
            >
              <div>
                <img
                  :src="item1.titleImage"
                  alt=""
                  style="width: 100px; height: 50px"
                />
              </div>
              <div class="txt">
                <p>{{ item1.title }}</p>
                <p>
                  <i
                    class="el-icon-folder-opened"
                    style="margin-right: 10px"
                  ></i
                  >{{ item1.createTime }}
                </p>
              </div>
            </div>
          </el-card>

          <!-- <div class="box" v-for="(item, index) in form" :key="index">
            <h1>{{ item.month }}</h1>
            <div v-for="(item1, index) in item.articles" :key="index">
              <p>
                <img
                  :src="item1.titleImage"
                  alt=""
                  style="width: 100px; height: 50px"
                />
              </p>
              <p>{{ item1.title }}</p>
              <p>{{ item1.createTime }}</p>
            </div>
          </div> -->

          <div class="page">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="form.total"
              @current-change="handlepage"
            >
            </el-pagination>
          </div>
        </div>
      </div>

      <div class="center-right">
        <div class="admin">
          <AdminView></AdminView>
        </div>
      </div>
    </div>
    <FooterView></FooterView>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        total: "",
        page: "1",
        list: "",
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    sendText(textID) {
      this.$router.push({
        path: "/TextView",
        query: {
          id: textID,
        },
      });
    },
    handlepage(v) {
      //切换分页
      console.log(v, "v");
      this.form.page = v;
      this.getList();
    },
    getList() {
      this.$axios
        .post("http://47.104.167.34:9110/api/archive/list", {
          current: this.form.page,
          size: 10,
        })
        .then((r) => {
          this.form = r.data.data;
          this.form.total = r.data.total;
          console.log(r, "<----ok-list-content", this.form);
        })
        .catch((r) => {
          console.log(r, "catch");
        });
    },
  },
};
</script>

<style scoped>
.txt {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-direction: column;
  margin-left: 10px;
}
.txt p:nth-child(2) {
  color: rgb(158, 168, 178);
  font-size: 14px;
}
.text {
  height: 73px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid gainsboro;
}
.text:hover {
  background-color: rgba(117, 103, 103, 0.141);
}
.box-card {
  width: 100%;
}
.center {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.center-left {
  position: relative;
  width: 900px;
  /* height: 1800px; */
  /* background-color: antiquewhite; */
  margin: 20px 10px 0 0;
  border-radius: 10px;
}
.center-right {
  width: 290px;
  /* height: 1000px; */
  /* background-color: antiquewhite; */
  margin-top: 20px;
}
.content {
  width: 100%;
  /* height: 100%; */
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;
  padding: 0 10px;
}
.admin {
  width: 290px;
  height: 220px;
}
.page {
  margin: 20px auto;
}
</style>